<!-- 通用形配置 -->
<template>
  <div class="vueComponent" style="margin-top:16px">
    <el-form-item label="组件">
      <el-button size="mini" type="primary" @click="openCode">编辑</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="api.box = true"
        icon="el-icon-search"
      ></el-button>
    </el-form-item>
    <codeedit
      @submit="codeClose"
      v-model="code.obj"
      :visible.sync="code.box"
      :type="code.type"
    ></codeedit>
    <l-dialog :width="780" :height="600" :visible.sync="api.box" :hasBtns="false">
      <l-table
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        row-key="F_Id"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
        @rowClick="rowClick"
      >
      </l-table>
    </l-dialog>
  </div>
</template>

<script>
import codeedit from '../../views/build/code.vue';
const apiComponent = window.$api.vdata.component;
export default {
  components: {
    codeedit,
  },
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      api: {
        box: false,
        item: {},
      },
      code: {
        type: "f_Content",
        box: false,
        obj: {},
      },
      checkValue: "",
      isPage: true,
      selectedData: [],
      columns: [
        { label: "组件编码", prop: "f_Code", minWidth: "150" },
        { label: "组件名称", prop: "f_Name", minWidth: "150" },
      ],
      tableData: [],
      tableLoading: false,
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 20,
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  created() {
    this.loadTablePageData();
  },
  methods: {
    codeClose(value) {
      this.myConfig[this.code.type] = value;
    },
    openCode() {
      this.code.obj = this.myConfig[this.code.type];
      this.code.box = true;
    },
    loadTablePageData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        // sidx:'F_CreateDate DESC',
        keyword: this.keyWord,
      };
      apiComponent
        .getPage(queryData)
        .then((res) => {
          const tableData = this.$deepClone(res.data.data);
          this.tableData = tableData.rows;
          this.tableTotal = tableData.records;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTablePageData(true);
    },
    rowClick({row}) {
      this.myConfig[this.code.type] = row.lrDatavComponentdetail_F_Component
      this.api.box = false
    },
  },
};
</script>

<style>
</style>